<template>
  <ul class="hello">
  <li v-for="list in list" >{{list.title}}</li>
  </ul>
</template>

<script>
import api from "../api/api";
export default {
  name: 'HelloWorld',
  data () {
    return {
      list:[],
      limit:10
    }
  },
  props: {
    page: {
      type: Number,
      default: 1
    }
  },
    watch: {
    page (val) {
      this.postdata()
    }
  },
  created(){
    this.postdata()
  }
  ,
  methods:{
    postdata(){
      api.show(
        {
          page: this.page,
          limit: this.limit
      },(err, list) => {
        if (err) {
          console.log(err)
        } else {
          console.log(list);
          list.data.data.forEach((data) => {
            const d = new Date(data.create_at)
            data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
          })
          this.list = list.data.data
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
  ol {
    margin-left: 2rem;
    list-style: outside decimal;
  }
  li {
    line-height: 1.5;
    padding: 1rem;
    border-bottom: 1px solid #b6b6b6;
    list-style-type: none
  }
  .title {
    font-weight: bold;
    font-size: 1.3rem;
  }
  .date {
    font-size: .8rem;
    color: #d6d6d6;
  }

</style>
